<script setup lang="tsx">
import { ContentWrap } from '@/components/ContentWrap'
import { Search } from '@/components/Search'
import { onMounted, ref } from 'vue'
import { Table } from '@/components/Table'
import { useRouter } from 'vue-router'
import { BaseButton } from '@/components/Button'
import { SysAccountListVo, SysAccountSearchQo } from '@/api/system/account/SysAccount/types'
import {
  selectSysAccountNameListApi,
  sysAccountDeleteApi,
  sysAccountPageApi
} from '@/api/system/account/SysAccount'
import { AllSchemas, useBasePageView } from '@/base/views/BasePageView'
import { TableSortProps } from '@/components/Table/src/types'
import { ElText } from 'element-plus'
import { sysDictChooseListApi } from '@/api/system/dict/SysDict'
import { KeyLabelValueVo } from '@/base/api/KeyLabelValueVo'
// [[ OnflowGenerator Range (- selectFunctionImport -) Start ]]

// [[ OnflowGenerator Range (- selectFunctionImport -) End ]]

defineOptions({
  name: 'SysAccountPage'
})
const { push } = useRouter()

const pageView = useBasePageView<SysAccountListVo, SysAccountSearchQo>('SysAccount')
const {
  pageInfo,
  delLoading,
  loading,
  dataList,
  baseGetList,
  searchParams,
  baseSortChange,
  datePickerShortcuts,
  registerRefreshEvent,
  editUrl,
  addUrl
} = pageView

const getList = async (params: any) => {
  await baseGetList(params, sysAccountPageApi)
}
pageView.doWatch(getList)
// [[ OnflowGenerator Range (- dictFunctions -) Start ]]
const genderOptions = ref<Array<KeyLabelValueVo>>([])
const getGender = async () => {
  const res = await sysDictChooseListApi('gender')
  genderOptions.value = res.data
}
getGender()

// [[ OnflowGenerator Range (- dictFunctions -) End ]]

// [[ OnflowGenerator Range (- selectFunctions -) Start ]]

// [[ OnflowGenerator Range (- selectFunctions -) End ]]

const sysAccountNameList = ref<Array<KeyLabelValueVo>>([])
const getSysAccountNameList = async () => {
  const res = await selectSysAccountNameListApi({})
  sysAccountNameList.value = res.data
}
getSysAccountNameList()

const delData = async (row: SysAccountListVo | null) => {
  await pageView.delData(row, sysAccountDeleteApi, () => {
    getList({ ...searchParams.value })
  })
}

const sortChange = async (sortProps: TableSortProps) => {
  await baseSortChange(sortProps, sysAccountPageApi)
}

const allSchemas = ref<AllSchemas>({
  searchSchema: [
    // [[ OnflowGenerator Range (- searchSchemas -) Start ]]
    {
      field: 'id',
      label: '主键id',
      component: 'InputNumber',
      componentProps: {
        placeholder: '请选择主键id',
        clearable: true
      }
    },
    {
      field: 'name',
      label: '账户名',
      component: 'Input',
      componentProps: {
        placeholder: '请输入账户名',
        clearable: true
      }
    },
    {
      field: 'uid',
      label: '账户UID',
      component: 'Input',
      componentProps: {
        placeholder: '请输入账户UID',
        clearable: true
      }
    },
    {
      field: 'nickName',
      label: '昵称',
      component: 'Input',
      componentProps: {
        placeholder: '请输入昵称',
        clearable: true
      }
    },
    {
      field: 'gender',
      label: '性别',
      component: 'Select',
      componentProps: {
        placeholder: '请选择性别',
        clearable: true,
        filterable: true,
        options: genderOptions
      }
    },
    {
      field: 'locked',
      label: '是否被锁定',
      component: 'Switch',
      componentProps: {
        placeholder: '请选择是否被锁定'
      }
    },
    {
      field: 'mobile',
      label: '手机号',
      component: 'Input',
      componentProps: {
        placeholder: '请输入手机号',
        clearable: true
      }
    },
    {
      field: 'email',
      label: '邮箱',
      component: 'Input',
      componentProps: {
        placeholder: '请输入邮箱',
        clearable: true
      }
    },
    {
      field: 'birthday',
      label: '生日',
      component: 'DatePicker',
      componentProps: {
        placeholder: '请选择生日',
        clearable: true,
        type: 'datetimerange',
        valueFormat: 'YYYY-MM-DD HH:mm:ss',
        shortcuts: datePickerShortcuts
      }
    },
    {
      field: 'registerDate',
      label: '注册日期',
      component: 'DatePicker',
      componentProps: {
        placeholder: '请选择注册日期',
        clearable: true,
        type: 'datetimerange',
        valueFormat: 'YYYY-MM-DD HH:mm:ss',
        shortcuts: datePickerShortcuts
      }
    },
    {
      field: 'lastLoginDate',
      label: '上次登录日期',
      component: 'DatePicker',
      componentProps: {
        placeholder: '请选择上次登录日期',
        clearable: true,
        type: 'datetimerange',
        valueFormat: 'YYYY-MM-DD HH:mm:ss',
        shortcuts: datePickerShortcuts
      }
    },
    {
      field: 'lastLoginIp',
      label: '上次登录IP',
      component: 'Input',
      componentProps: {
        placeholder: '请输入上次登录IP',
        clearable: true
      }
    },
    {
      field: 'nowLoginIp',
      label: '本次登录IP地址',
      component: 'Input',
      componentProps: {
        placeholder: '请输入本次登录IP地址',
        clearable: true
      }
    },
    {
      field: 'nowLoginDate',
      label: '本次登录时间',
      component: 'DatePicker',
      componentProps: {
        placeholder: '请选择本次登录时间',
        clearable: true,
        type: 'datetimerange',
        valueFormat: 'YYYY-MM-DD HH:mm:ss',
        shortcuts: datePickerShortcuts
      }
    },
    {
      field: 'loginCount',
      label: '登录次数',
      component: 'Input',
      componentProps: {
        placeholder: '请输入登录次数',
        clearable: true
      }
    },
    {
      field: 'status',
      label: '账户状态',
      component: 'Input',
      componentProps: {
        placeholder: '请输入账户状态',
        clearable: true
      }
    },
    {
      field: 'wx',
      label: '微信号',
      component: 'Input',
      componentProps: {
        placeholder: '请输入微信号',
        clearable: true
      }
    },
    {
      field: 'qq',
      label: 'QQ号',
      component: 'Input',
      componentProps: {
        placeholder: '请输入QQ号',
        clearable: true
      }
    },
    {
      field: 'remark',
      label: '备注信息',
      component: 'Input',
      componentProps: {
        placeholder: '请输入备注信息',
        clearable: true
      }
    },
    {
      field: 'expireTime',
      label: '账号过期时间',
      component: 'DatePicker',
      componentProps: {
        placeholder: '请选择账号过期时间',
        clearable: true,
        type: 'datetimerange',
        valueFormat: 'YYYY-MM-DD HH:mm:ss',
        shortcuts: datePickerShortcuts
      }
    },
    {
      field: 'lockStartTime',
      label: '锁定开始时间',
      component: 'DatePicker',
      componentProps: {
        placeholder: '请选择锁定开始时间',
        clearable: true,
        type: 'datetimerange',
        valueFormat: 'YYYY-MM-DD HH:mm:ss',
        shortcuts: datePickerShortcuts
      }
    },
    {
      field: 'lockEndTime',
      label: '锁定结束时间',
      component: 'DatePicker',
      componentProps: {
        placeholder: '请选择锁定结束时间',
        clearable: true,
        type: 'datetimerange',
        valueFormat: 'YYYY-MM-DD HH:mm:ss',
        shortcuts: datePickerShortcuts
      }
    },
    {
      field: 'createTime',
      label: '创建时间',
      component: 'DatePicker',
      componentProps: {
        placeholder: '请选择创建时间',
        clearable: true,
        type: 'datetimerange',
        valueFormat: 'YYYY-MM-DD HH:mm:ss',
        shortcuts: datePickerShortcuts
      }
    },
    {
      field: 'updateTime',
      label: '更新时间',
      component: 'DatePicker',
      componentProps: {
        placeholder: '请选择更新时间',
        clearable: true,
        type: 'datetimerange',
        valueFormat: 'YYYY-MM-DD HH:mm:ss',
        shortcuts: datePickerShortcuts
      }
    },
    // [[ OnflowGenerator Range (- searchSchemas -) End ]]
    {
      field: 'createUser',
      label: '创建人',
      component: 'Select',
      componentProps: {
        placeholder: '请选择创建人',
        clearable: true,
        filterable: true,
        options: sysAccountNameList
      }
    },
    {
      field: 'updateUser',
      label: '更新人',
      component: 'Select',
      componentProps: {
        placeholder: '请选择更新人',
        clearable: true,
        filterable: true,
        options: sysAccountNameList
      }
    }
  ],
  tableColumns: [
    {
      field: 'selection',
      type: 'selection'
    },
    {
      field: 'index',
      label: '序号',
      type: 'index',
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      detail: {
        hidden: true
      }
    },
    // [[ OnflowGenerator Range (- tableColumns -) Start ]]
    {
      field: 'name',
      label: '账户名',
      sortable: 'custom'
    },
    {
      field: 'uid',
      label: '账户UID',
      sortable: 'custom'
    },
    {
      field: 'nickName',
      label: '昵称',
      sortable: 'custom'
    },
    {
      field: 'gender',
      label: '性别',
      sortable: 'custom',
      slots: {
        default: (data: any) => {
          return (
            <>
              <div>{data.row.genderName}</div>
            </>
          )
        }
      }
    },
    {
      field: 'locked',
      label: '是否被锁定',
      sortable: 'custom',
      slots: {
        default: (data: any) => {
          return (
            <>
              <ElText type={data.row.locked ? 'success' : 'danger'}>
                {data.row.locked ? '是' : '否'}
              </ElText>
            </>
          )
        }
      }
    },
    {
      field: 'mobile',
      label: '手机号',
      sortable: 'custom'
    },
    {
      field: 'email',
      label: '邮箱',
      sortable: 'custom'
    },
    {
      field: 'avatar',
      label: '头像'
    },
    {
      field: 'roleIdName',
      label: '角色',
      sortable: 'custom',
      slots: {
        default: (data: any) => {
          return (
            <>
              <ElText
                type="primary"
                style="cursor: pointer;"
                onClick={() => {
                  push(`/System/SysRole/SysRoleEdit?id=${data.row.roleId}&type=edit`)
                }}
              >
                {data.row.roleIdName}
              </ElText>
            </>
          )
        }
      }
    },
    {
      field: 'birthday',
      label: '生日',
      sortable: 'custom'
    },
    {
      field: 'registerDate',
      label: '注册日期',
      sortable: 'custom'
    },
    {
      field: 'lastLoginDate',
      label: '上次登录日期',
      sortable: 'custom'
    },
    {
      field: 'lastLoginIp',
      label: '上次登录IP',
      sortable: 'custom'
    },
    {
      field: 'nowLoginIp',
      label: '本次登录IP地址',
      sortable: 'custom'
    },
    {
      field: 'nowLoginDate',
      label: '本次登录时间',
      sortable: 'custom'
    },
    {
      field: 'loginCount',
      label: '登录次数',
      sortable: 'custom'
    },
    {
      field: 'status',
      label: '账户状态',
      sortable: 'custom'
    },
    {
      field: 'wx',
      label: '微信号',
      sortable: 'custom'
    },
    {
      field: 'qq',
      label: 'QQ号',
      sortable: 'custom'
    },
    {
      field: 'remark',
      label: '备注信息',
      sortable: 'custom'
    },
    {
      field: 'expireTime',
      label: '账号过期时间',
      sortable: 'custom'
    },
    {
      field: 'lockStartTime',
      label: '锁定开始时间',
      sortable: 'custom'
    },
    {
      field: 'lockEndTime',
      label: '锁定结束时间',
      sortable: 'custom'
    },
    {
      field: 'createTime',
      label: '创建时间',
      sortable: 'custom'
    },
    {
      field: 'updateTime',
      label: '更新时间',
      sortable: 'custom'
    },
    // [[ OnflowGenerator Range (- tableColumns -) End ]]
    {
      field: 'createUserName',
      label: '创建人',
      sortable: 'custom'
    },
    {
      field: 'updateUserName',
      label: '更新人',
      sortable: 'custom'
    },
    {
      field: 'action',
      width: '260px',
      label: '操作',
      slots: {
        default: (data: any) => {
          return (
            <>
              <BaseButton type="primary" onClick={() => editData(data.row)} permission="'edit'">
                编辑
              </BaseButton>
              <BaseButton type="danger" onClick={() => delData(data.row)} permission="'delete'">
                删除
              </BaseButton>
            </>
          )
        }
      }
    }
  ]
})

const editData = (row: SysAccountListVo) => {
  push(`${editUrl}?id=${row.id}&type=edit`)
}

const addAction = () => {
  push(`${addUrl}?type=add`)
}

onMounted(() => {
  getList({})
  registerRefreshEvent(sysAccountPageApi)
})
</script>

<template>
  <ContentWrap>
    <Search
      :schema="allSchemas.searchSchema"
      @search="getList"
      @reset="getList"
      expandField="id"
      :searchLoading="loading"
      :resetLoading="loading"
    />

    <div class="mb-10px">
      <BaseButton type="primary" @click="addAction" permission="'add'">新增</BaseButton>
      <BaseButton :loading="delLoading" type="danger" @click="delData(null)" permission="'delete'">
        删除
      </BaseButton>
    </div>

    <Table
      v-model:pageSize="pageInfo.pageSize"
      v-model:currentPage="pageInfo.currentPage"
      :columns="allSchemas.tableColumns"
      :data="dataList"
      :loading="loading"
      :stripe="true"
      :pagination="{
        total: pageInfo.totalCount
      }"
      @register="pageView.tableRegister"
      @sort-change="sortChange"
    />
  </ContentWrap>
</template>
